<!--
 * @Author: your name
 * @Date: 2021-04-19 17:39:15
 * @LastEditTime: 2021-04-23 14:42:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\Home\echartsDemo\index.vue
-->
<template>
  <div style="overflow:hidden">
    <div id="main" style="width: 100%;height:800px;"></div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from "echarts/components";
import { LineChart, PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer
]);
export default {
  data() {
    return {};
  },
  props: {
    tagVO: {
      type: Array
    }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    let sourceData = new Set();
    let product = [
      "product",
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12"
    ];
    let initProduct = ["product"];
    let initSeriesLine = [];
    //遍历标题并去重
    this.tagVO.map((item, i) => {
      initProduct.push(`${item.week}`);
      item.tags.map((item1, index) => {
        sourceData.add(item1.tagName);
      });
    });
    console.log(initProduct);

    let sourceData1 = [...sourceData];
    let source = [];
    sourceData1.map(item => {
      initSeriesLine.push({
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" }
      });
      source.push([item]);
    });
    product.map((item, index) => {
      if (index > 0) {
        this.tagVO.map((item1, index1) => {
          if (`${item1.week}` === item) {
            item1.tags.map((item2, index2) => {
              source.map((item3, index3) => {
                if (item2.tagName === item3[0]) {
                  for (let i = 1; i <= index; i++) {
                    if (item3[i] === undefined && i !== index) {
                      item3.push("0");
                    }
                    if (i === index) {
                      item3[index] = item2.num;
                      break;
                    }
                  }
                }
              });
            });
          }
        });
      }
    });
    let option = {
      legend: {},
      tooltip: {
        trigger: "axis",
        showContent: false
      },
      dataset: {
        source: [
          product,
          // ["product", "2012"],
          ...source
          // ["aaa", 82.1, 88.7, 70.1, 53.4, 85.1],
          // ["Matcha Latte",  51.4, 55.1, 53.3, 73.8, 68.7],
          // ["Cheese Cocoa",  62.2, 69.5, 36.4, 45.2, 32.5],
          // ["Walnut Brownie",  37.1, 41.2, 18, 33.9, 49.1],
          // ["Walnut Brownie", 37.1, 41.2, 18, 33.9, 49.1]
        ]
      },
      xAxis: { type: "category", name: "月" },
      yAxis: { gridIndex: 0, name: "报名数量" },
      grid: { top: "55%" },
      series: [
        // {
        //   type: "line",
        //   smooth: true,
        //   seriesLayoutBy: "row",
        //   emphasis: { focus: "series" }
        // },
        ...initSeriesLine,
        {
          type: "pie",
          id: "pie",
          radius: "30%",
          center: ["50%", "25%"],
          emphasis: { focus: "data" },
          label: {
            formatter: `{b}: {@${initProduct[3]}} ({d}%)`
          },
          encode: {
            itemName: "product",
            value: initProduct[3],
            tooltip: initProduct[3]
          }
        }
      ]
    };
    myChart.on("updateAxisPointer", function(event) {
      var xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        var dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: "pie",
            label: {
              formatter: "{b}: {@[" + dimension + "]} ({d}%)"
            },
            encode: {
              value: dimension,
              tooltip: dimension
            }
          }
        });
      }
    });
    option && myChart.setOption(option);
  }
};
</script>
